Style guide · v1

Sam Deo — warm portfolio system

A warm, rounded, quietly playful system: cream ground, terracotta primary with a sage second voice, Caprasimo display over Figtree, over-rounded shapes, frosted glass, and slow ambient motion.

01 · Color

Palette

Cream ground with two accents on a shared 100–900 perceptual ramp. Light steps for tinted fills and hovers, the base at 500–600, deep steps for text on tints. Never desaturate to grey — the warmth is the point.

Accessible text pairings on cream
Ink #201e1d
12.4:1 · any size
Terracotta 700
5.7:1 · any size
Sage 700
5.4:1 · any size
Sage 600
3.5:1 · 24px+ only
Steps 100–500 of either ramp are fill-only — they never carry text on cream. Base terracotta #c67139 is 3.0:1: fine for icons, chrome and 24px+ display, not for body copy.
Ground
#f5ead8
Surface
#ebddc5
Terracotta
#c67139
Sage
#7a8a5e
Ink
#201e1d
Terracotta ramp · 100 → 900
Sage ramp · 100 → 900
02 · Type

Typography

Caprasimo is the only display voice, set tight (~1.02 leading) and flush left. Figtree carries every word of body copy, plus the 10px uppercase kicker.

Hero 74
Caprasimo 400 · page headline
Section 56
Caprasimo 400 · section head
Case title 35
Caprasimo 400 · project title
01
Numeral 66 · sage 600, oversized index
Kicker 10 · uppercase
Lead 19 — the intro paragraph under a headline.
Body 15 — running copy, case-study descriptions, and everything else. Small 13 handles captions and meta.
Figtree 400–700
03 · Shape & surface

Radii, glass, elevation

Over-round everything. Two surface treatments only: solid sand, or frosted glass — translucent cream with a 16px backdrop blur and a light border. Glass is the signature; it only reads over color or motion.

Pill 999
8 · 16 · 28 · 999
10 yrs
Frosted glass · the signature
shadow-sm
Resting cards
shadow-lg
Lifted mockups
04 · Components

Parts

Actions are pills. Tags are tinted from the ramps. The nav is a frosted pill that starts full-bleed and shrinks on scroll.

Buttons — primary, secondary, ghost
Get in touch Download CV View case study →
Tags — category, status, eyebrow
E-commerce In season Front-end development Brand
Navigation — shrunk frosted pill state
Sam Deo Get in touch
Case study block — numeral, kicker, title, tags, action
fxonline.com
03
FX Online Agents System · 2023
Agents connecting families around the world
Staff track, release, or cancel international money transfers in real time.
FintechDashboard
View case study →
05 · Motion

Ambient & interaction

Everything eases on cubic-bezier(.4,0,.2,1). Ambient motion runs on long, calm loops — nothing bounces.

Lava-lamp backdrop
Three blurred accent blobs at ~0.5 opacity on 9–13s loops, behind hero and About copy.
Cursor glow
A 600px warm radial follows the pointer sitewide; over a case-study link it turns sage and pulses.
06 · Voice

Words

Do
Calm, first-person, understated-confident.
Short declaratives with the occasional wry aside.
Sentence case everywhere but the kicker.
Titles make a claim: “A pantry shop that feels like a market.”
One concrete stat row — never a wall of metrics.
Don't
No hype, exclamation marks, or emoji.
No sharp corners or hairline-only geometry.
No greys — never desaturate the palette.
No condensed or geometric display faces.
Don't crowd; rounded shapes need air to read as soft.
07 · Icons & imagery

Assets

Lucide at 2.75
Stroke-width 2.75 for a rounder, heavier line. No emoji. The brand renders as the name in Caprasimo — there is no separate mark.
Soft-masked imagery
Photographs are washed and rounded — arches, circles and blobs. Project screens sit in a browser frame at 3:2.